<template>
    <div class="OnlineRemit f-cb">
        <!-- <open-account-pregress v-if="isModify==1"></open-account-pregress> -->
        <div class="title">{{$t('m.RemittanceNotice')}}</div>
        <el-form label-position="left" :label-width="lang=='en'?'180px':'120px'" :model="formLabelAlign" ref="formLabelAlign" :rules="rules">
            <el-form-item :label="$t('m.RemittanceCurrency')" prop="chargeCurrency" >
                <el-select v-model="formLabelAlign.chargeCurrency" :placeholder="$t('m.Pleaseselect')+$t('m.RemittanceCurrencysmall')">
                    <el-option
                        v-for="item in currencyList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.RemittanceAmount')" prop="chargeAmount">
                <el-input v-model="formLabelAlign.chargeAmount" :placeholder="$t('m.Pleaseenter')+$t('m.RemittanceAmountsmall')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.RemittanceBank')" prop="bankName">
                <el-input v-model="formLabelAlign.bankName" :placeholder="$t('m.Pleaseenter')+$t('m.RemittanceBankSmall')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.RemittanceBankAccount')" prop="chargeAccount">
                <el-input v-model="formLabelAlign.chargeAccount" :placeholder="$t('m.Pleaseenter')+$t('m.RemittanceBankAccountsmall')" @input="replace(formLabelAlign.chargeAccount)"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.RemittanceCertificate')" class="voucher" required>
                <el-upload 
                    :action="BaseUrl" 
                    list-type="picture-card" 
                    name="file"
                    :file-list="fileList"
                    :on-success="handleSuccess"
                    :on-remove="handleRemove"
                    :headers="myHeaders"
                    :on-preview="handlePictureCardPreview"
                    :before-upload="beforeAvatarUpload"
                    accept="image/png, image/jpeg"
                >
                    <i slot="default" class="el-icon-plus">
                        <span>{{$t('m.Addvoucher')}}</span>
                    </i>
                </el-upload>
            </el-form-item>
            <div class="CounterOrderTips">
                {{flowInfo.page_info.branch.local[1]['bottom_tip_'+lang]}}
            </div>
        </el-form>
        <div class="mainLandBtns f-cb">
            <span class="fl return" @click="returnLinks">{{$t('m.Previousstep')}}</span>
            <span class="fr next" @click="OpencloseDialog">{{$t('m.Submit')}}</span>
        </div>
        <el-dialog
            title=""
            :visible.sync="dialogVisibles"
            width="460px"
            custom-class="tips_dialog"
            :before-close="OpencloseDialog"
            center>
            <span>{{$t('m.text13')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="OpencloseDialog">{{$t('m.Cancel')}}</el-button>
                <el-button type="primary" @click="SubmitLinks">{{$t('m.define')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {pageFlow,BtnsFlow,submit,getsubscript} from "@/common/common";
    import openAccountPregress from "@/components/assembly/openAccountProgress.vue";
    export default {
        components: {openAccountPregress},
        data() {
            return{
                formLabelAlign:{
                    chargeCurrency: "", //币种
                    chargeAmount: "", //金额
                    chargeAccount: "",//账户
                    chargeVoucher:[],//图片
                    bankName:"",//银行名称
                    legalizeType:"",
                },
                myHeaders:{
                    Authorization:'Bearer '+sessionStorage.getItem("token"),
                    'Accept-Language':sessionStorage.getItem("lang"),
                },
                fileList:[],
                dialogImageUrl:"",
                dialogVisibles:false,
                currencyList:[
                    // {name: "人民币", value: "CNY"},
                    {name: "HKD", value: "HKD"},
                    // {name: "美元", value: "USD"}
                ],
                BaseUrl:this.$axios.defaults.baseURL+"/common/uploads"+ "?lang=" + sessionStorage.getItem("lang"),
                dialogVisible:false,
                flowinfo:JSON.parse(sessionStorage.getItem('flowInfo')),
                rules:{
                    chargeCurrency:[
                        { required: true, message: this.$t('m.Pleaseselect')+this.$t('m.RemittanceCurrencysmall')}
                    ],
                    bankName:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.RemittanceBankSmall')}
                    ],
                    chargeAmount:[
                        { required: true, message:this.$t('m.Pleaseenter')+this.$t('m.RemittanceAmountsmall')},
                        {validator:this.checkchargeAmount}
                    ],
                    chargeAccount:[
                        { required: true, message: this.$t('m.Pleaseenter')+this.$t('m.RemittanceBankAccountsmall')},
                    ]
                },
                num:0,

            }
        },
        mounted(){
            console.log(this.BaseUrl)
            this.flowinfo = this.flowInfo;
            this.formLabelAlign.legalizeType = sessionStorage.getItem('legalizeType');
            window.document.title = this.$t('m.OnlineRemit')
            this.num = getsubscript(this.flowinfo)
            this.getflow(this.flowInfo.page_flow[this.num])
        },
        computed:{
            lang(){
                return sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en';
            },
            flowInfo(){
                return JSON.parse(sessionStorage.getItem('flowInfo'))
            },
            isModify(){
                return Number(sessionStorage.getItem('isModify'))
            },
        },
        methods:{
            replace(obj){
                this.formLabelAlign.chargeAccount = this.formLabelAlign.chargeAccount.replace(/\D/g,'').replace(/....(?!$)/g,'$& ')
            },
            checkchargeAmount(rule, value, callback){
                var reg = /^\d+.?\d{0,2}$/;
                var number = /^[0-9]{1}([0-9]|[.])*$/;
                if(!number.test(value)){
                    return callback(new Error(this.$t('m.Pleaseenter')+this.$t('m.number')));
                }else if (!reg.test(value)) {
                    return callback(new Error(this.$t('m.TwoDecimal')));
                } else {
                    callback();
                }
            },
            returnLinks(){
                this.$router.replace({ path:'/OnlineAddress'});
            },
            getflow(page){
                var _this = this;
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        this.flowinfo = res.data;
                        if(JSON.stringify(res.data.user_fill) != '{}'){
                            _this.formLabelAlign = res.data.user_fill;
                            _this.formLabelAlign.chargeAccount = res.data.user_fill.chargeAccount.replace(/\D/g,'').replace(/....(?!$)/g,'$& ')
                            _this.formLabelAlign.chargeVoucher.forEach(function(res){
                                _this.fileList.push({url:res})
                            })
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else if(res.code == 102 || res.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            handleRemove(file, fileList) {
                console.log(file,fileList,'1111');
                this.fileList = fileList;
            },
            handleSuccess(res, file, fileList) {
                this.fileList.push({url:res.data.url})
                console.log(this.fileList,'handleSuccess')
            },
            handlePictureCardPreview(file){
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeAvatarUpload(file) {
                const isJPG = ['image/jpeg','image/png','image/jpg'].includes(file.type);
                if (!isJPG) {
                    this.$message.error(this.$t('m.text33'));
                }
                return isJPG;
            },
            OpencloseDialog(){
                var _this = this;
                _this.formLabelAlign.chargeVoucher =[];
                this.fileList.forEach(function(res){
                    _this.formLabelAlign.chargeVoucher.push(res.url)
                })
                console.log(this.formLabelAlign)
                this.$refs['formLabelAlign'].validate((valid) => {
                    if (valid) {
                        if(_this.formLabelAlign.chargeVoucher.length == 0){
                            _this.$message({
                                message:_this.$t('m.Pleaseupload')+_this.$t('m.RemittanceCertificate'),
                                type: "warning"
                            })
                            return false;
                        }
                        this.dialogVisibles = !this.dialogVisibles;
                    }
                })
            },
            SubmitLinks(){
                var _this = this;
                this.dialogVisibles = false;
                var data = {
                    pageId:_this.flowInfo.page_info.id,
                    isModify:Number(sessionStorage.getItem('isModify')),
                    fields:{
                        chargeCurrency: _this.formLabelAlign.chargeCurrency, //币种
                        chargeAmount: _this.formLabelAlign.chargeAmount, //金额
                        chargeAccount: _this.formLabelAlign.chargeAccount.replace(/\s*/g,""),//账户
                        chargeVoucher: _this.formLabelAlign.chargeVoucher,//图片
                        bankName:_this.formLabelAlign.bankName,//银行名称
                        legalizeType: _this.formLabelAlign.legalizeType,
                    },
                }
                this.$refs['formLabelAlign'].validate((valid) => {
                    if (valid) {
                        submit(data,res => {
                            var res = res.data;
                            console.log(res,_this.flowInfo,'submitcuss')
                            if(res.code == 1){
                                if(_this.flowInfo.page_info.id == _this.flowInfo.page_flow[_this.flowInfo.page_flow.length - 1]){
                                    _this.$router.replace({ path:'/examine'});
                                }else{
                                    _this.BtnsFlowBtn()
                                    //_this.flowInfo.page_flow[_this.num + 1]
                                }
                            }else if(res.code == 401){
                                _this.$router.replace({path:'/'})
                            }else if(res.code == 105){
                                if(_this.flowInfo.page_info.id == _this.flowInfo.page_flow[_this.flowInfo.page_flow.length - 1]){
                                    _this.$router.replace({ path:'/examine'});
                                }else{
                                    _this.BtnsFlowBtn()
                                }
                            }else{
                                _this.$message({
                                    message: res.msg,
                                    type: "warning"
                                })
                            }
                        })
                    }
                }); 
            },
            BtnsFlowBtn(page){
                var _this = this;
                BtnsFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 102){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
        },
        watch:{

        },
    }
</script>

<style lang="less">
    .OnlineRemit{
        padding-top:38px;
        width:460px;
        margin:0 auto;
        .title{
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
            margin-bottom: 9px;
        }
        .el-form-item{
            margin-bottom:16px;
            border-bottom: 1px solid @e7e6eb;
            .el-form-item__label{
                font-size: 14px;
                color: @titleColor;
            }
            .el-select{
                width: 100%;
            }
            .el-input__inner{
                border:none;
                width: 100%;
                display: block;
            }
        }
        .el-form-item.voucher{
            border:none;
            .el-form-item__label{
                display: block;
                width: 100% !important;
                float: none;
                padding: 0;
            }
            .el-form-item__content{
                margin-left: 0 !important;
                display: block;
                max-height: 197px;
                overflow: hidden;
            }
            .el-form-item__content>div{
                margin-top: 6px;
            }
            .el-upload-list--picture-card .el-upload-list__item{
                width: 190px;
                height: 190px;
                margin: 0 20px 0 0;
            }
            .el-upload-list--picture-card .el-upload-list__item:nth-child(2){
                margin-right: 0;
            }
            .el-upload--picture-card{
                width: 190px;
                height: 190px;
                line-height: 190px;
                position: relative;
            }
            .el-upload--picture-card i{
                position: absolute;
                top:50%;
                left:50%;
                color: @hoverColor;
                font-size: 32px;
                transform: translate(-50%,-50%);
            }
            .el-upload--picture-card i span{
                display: block;
                font-size: 14px;
                color: @404040;
                line-height: 34px;
            }
        }
        .el-form{
            padding-bottom: 120px;
        }
        .CounterOrderTips{
            font-size: 12px;
            color: @titleColor;
            line-height:20px;
        }
        .mainLandBtns{
            width: 100%;
            span{
                cursor: pointer;
                width: 180px;
                height: 36px;
                line-height: 36px;
                border-radius:3px;
                display:block;
                text-align: center;
                font-size: 14px;
                transition: opacity 0.3s;
            }
            span:hover{
                opacity: 0.8;
            }
            span.return{
                background: @e7e6eb;
                color: @000;
            }
            span.next{
                background: @hoverColor;
                color: @fff;
            }
        }
        .tips_dialog{
            position: absolute;
            margin: 0 !important;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .el-dialog__body{
                text-align: center;
            }
            .el-button{
                width:80px;
                display: inline-block;
            }
        }
    }
</style>